<template>
  <div v-show="optionsType !== 'page'">
    <!-- 左 -->
    <div
      :style="{
        height: elm.height + 'px',
        top: elm.top + 'px',
        left: elm.left + 'px',
      }"
      class="verti"
      @mousedown="handlemousedown($event, 'left', 'left', 'width')"
    >
      <div class="square" />
    </div>
    <!-- 右 -->
    <div
      :style="{
        height: elm.height + 'px',
        top: elm.top + 'px',
        left: elm.left + elm.width + 'px',
      }"
      class="verti"
      @mousedown="handlemousedown($event, 'right', 'width')"
    >
      <div class="square" />
    </div>
    <!-- 上 -->
    <div
      :style="{
        width: elm.width + 'px',
        top: elm.top + 'px',
        left: elm.left + 'px',
      }"
      class="horiz"
      @mousedown="handlemousedown($event, 'up', 'top', 'height')"
    >
      <div class="square" />
    </div>
    <!-- 下 -->
    <div
      :style="{
        width: elm.width + 'px',
        top: elm.top + elm.height + 'px',
        left: elm.left + 'px',
      }"
      class="horiz"
      @mousedown="handlemousedown($event, 'down', 'height')"
    >
      <div class="square" />
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
// 调整方向 left | right | up | down
const _type = ref('')
const optionsType = computed(() => {
  return proxy.$store.state.print.type
})
const elm = computed(() => {
  let target = proxy.$store.state.print.activeElement
  if (!target.resizable) return ''
  return target
})

function handlemousedown(e, type, originX, originY) {
  e.stopPropagation()
  _type.value = type

  proxy.$store.commit('print/initmove', {
    startX: e.pageX,
    startY: e.pageY,
    originX: elm.value[originX],
    originY: elm.value[originY],
  })

  document.addEventListener('mousemove', handlemousemove, true)
  document.addEventListener('mouseup', handlemouseup, true)
}
function handlemousemove(e) {
  e.stopPropagation()
  e.preventDefault()

  proxy.$store.commit('print/resize', {
    x: e.pageX,
    y: e.pageY,
    type: _type.value,
  })
}
function handlemouseup() {
  document.removeEventListener('mousemove', handlemousemove, true)
  document.removeEventListener('mouseup', handlemouseup, true)
  proxy.$store.commit('print/stopmove')
}
</script>

<style scoped>
.verti,
.horiz {
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.verti {
  width: 0;
  cursor: ew-resize;
}
.horiz {
  height: 0;
  cursor: ns-resize;
}
.square {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 1px solid #2196f3;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
